extends ../_layout

block active
  - sidebar_active = 'nestable.html'

block content
  h3 Nestable
    small Drag &amp; drop hierarchical list with mouse and touch compatibility

  .container-fluid
    .js-nestable-action
      a.btn.btn-default.btn-sm.mr-sm(data-action="expand-all") Expand All
      a.btn.btn-default.btn-sm(data-action="collapse-all") CollapseAll
    .row
      .col-md-6
        .dd#nestable
            ol.dd-list
              li.dd-item(data-id='1')
                .dd-handle Item 1
              li.dd-item(data-id='2')
                .dd-handle Item 2
                ol.dd-list
                  li.dd-item(data-id='3')
                    .dd-handle Item 3
                  li.dd-item(data-id='4')
                    .dd-handle Item 4
                  li.dd-item(data-id='5')
                    .dd-handle Item 5
                    ol.dd-list
                      li.dd-item(data-id='6')
                        .dd-handle Item 6
                      li.dd-item(data-id='7')
                        .dd-handle Item 7
                      li.dd-item(data-id='8')
                        .dd-handle Item 8
                  li.dd-item(data-id='9')
                    .dd-handle Item 9
                  li.dd-item(data-id='10')
                    .dd-handle Item 10
              li.dd-item(data-id='11')
                .dd-handle Item 11
              li.dd-item(data-id='12')
                .dd-handle Item 12
        textarea.form-control#nestable-output

      .col-md-6
        .dd#nestable2
            ol.dd-list
              li.dd-item.dd3-item(data-id='13')
                .dd-handle.dd3-handle Drag
                .dd3-content Item 13
              li.dd-item.dd3-item(data-id='14')
                .dd-handle.dd3-handle Drag
                .dd3-content Item 14
              li.dd-item.dd3-item(data-id='15')
                .dd-handle.dd3-handle Drag
                .dd3-content Item 15
                ol.dd-list
                  li.dd-item.dd3-item(data-id='16')
                    .dd-handle.dd3-handle Drag
                    .dd3-content Item 16
                  li.dd-item.dd3-item(data-id='17')
                    .dd-handle.dd3-handle Drag
                    .dd3-content Item 17
                  li.dd-item.dd3-item(data-id='18')
                    .dd-handle.dd3-handle Drag
                    .dd3-content Item 18
        
        textarea.form-control#nestable2-output

block vendor_js
  script(src='../vendor/nestable/jquery.nestable.js')
  script(src='js/demo/demo-nestable.js')
